<script setup>
import { ref } from "vue";

const isDel = ref(true);
const info = ref([
  { id: 1, name: "jj", pwd: 888, em: "555@qq.com", isDel },
  { id: 2, name: "jay", pwd: 666, em: "444@qq.com", isDel },
]);
const username = ref("");
const password = ref("");
const email = ref("");
const num = 3;
function add(num) {
  // 判断输入框是否为空
  if (username.value == "" || password.value == "" || email.value == "") {
    if (username.value == "") {
      return alert("用户名不能为空");
    } else if (password.value == "") {
      return alert("密码不能为空");
    } else if (email.value == "") {
      return alert("邮箱不能为空");
    }
  }
  const newInfo = {
    id: num++,
    name: username.value,
    pwd: password.value,
    em: email.value,
    isDel: isDel,
  };
  info.value.push(newInfo);
  // 清空输入框
  username.value = "";
  password.value = "";
  email.value = "";
}

function del(item) {
  const index = info.value.findIndex((x) => x.id === item.id);
  if (index !== -1) {
    info.value.splice(index, 1);
  }
}
// function del() {
//   return (isDel.value = !isDel.value);
// }

function update() {
  // 清空输入框
  username.value = "";
  password.value = "";
  email.value = "";
}
</script>

<template>
  <div class="bigbox">
    <h2>学籍管理案例</h2>
    <div class="input">
      <p class="user">
        <span>*</span>用户名
        <input v-model="username" placeholder="请输入用户名" />
      </p>
      <p class="user">
        <span>*</span>密码 <input v-model="password" placeholder="请输入密码" />
      </p>
      <p class="user">
        <span>*</span>邮箱 <input v-model="email" placeholder="请输入邮箱" />
      </p>
      <p class="btn">
        <button @click="add(num++)">添加</button>
        <button @click="update">重置</button>
      </p>
    </div>
    <div class="box">
      <table>
        <thead>
          <tr>
            <th>编号</th>
            <th>姓名</th>
            <th>密码</th>
            <th>邮箱</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody class="tbody">
          <tr v-for="item in info" :key="item.id" v-if="isDel">
            <td>{{ item.id }}</td>
            <td>{{ item.name }}</td>
            <td>{{ item.pwd }}</td>
            <td>{{ item.em }}</td>
            <td>
              <button @click="del(item)" class="del">删除</button>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>

<style scoped>
.bigbox {
  width: 800px;
  background-color: #e8e8e8;
  margin: 0 auto;
  padding-top: 20px;
  padding-bottom: 20px;
}
h2 {
  text-align: center;
}
.user {
  width: 600px;
  height: 30px;
  margin: 10px auto;
  line-height: 30px;
  display: flex;
  justify-content: flex-end;
  span {
    color: red;
  }
}
input {
  width: 85%;
  margin-left: 10px;
}
.btn {
  width: 600px;
  margin: 0 auto;
  text-align: right;
  color: white;
  font-size: 12px;
}
.del {
  background-color: red;
  padding: 4px;
  font-size: 12px;
  color: white;
}
.box {
  width: 700px;
  background-color: rgb(246, 246, 246);
  margin: 10px auto;
}
thead {
  display: flex;
  justify-content: center;
}
.tbody {
  width: 700px;
  /* display: flex;
  justify-content: center; */
}
tr {
  display: flex;
  justify-content: space-evenly;
  width: 100%;
  text-align: center;
  padding: 10px 0px 10px 0px;
  border-bottom: solid #cccccc5e 2px;
}
td {
  width: 120px;
}
</style>
